<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>上门回收订单</title>
    <link rel="stylesheet" href="pages/layui/css/layui.css" media="all">
    <script src="pages/layui/layui.js"></script>
    <script src="js/config.js"></script>
    <script src="js/reqInterceptor.js"></script>
    <style>
        body{margin: 10px;}
        label[name='zhi']{
            width: 10px;
            margin-left: 0;
            padding-left: 0;
        }
    </style>
</head>
<body>
<div>
    <form class="layui-form" id="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">订单编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="orderId" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户昵称</label>
                <div class="layui-input-inline">
                    <input type="text" name="nickName" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户手机号</label>
                <div class="layui-input-inline">
                    <input type="text" name="userPhone" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">回收员</label>
                <div class="layui-input-inline">
                    <input type="text" name="recyclersName" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">下单时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="receiveBeginDate" class="layui-input test-item" placeholder="开始日期">
                </div>
                <label class="layui-form-label" name="zhi">至</label>
                <div class="layui-input-inline">
                    <input type="text" name="receiveEndDate" class="layui-input test-item" placeholder="结束日期">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">完成时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="finishBeginDate" class="layui-input test-item" placeholder="开始日期">
                </div>
                <label class="layui-form-label" name="zhi">至</label>
                <div class="layui-input-inline">
                    <input type="text" name="finishEndDate" class="layui-input test-item" placeholder="结束日期">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">订单状态</label>
                <div class="layui-input-inline">
                    <select name="orderStatus" class="orderStatus" lay-verify="orderStatus" lay-filter="orderStatus">
                        <option value="">请选择</option>
                        <option value="1">预约中</option>
                        <option value="2">已接单</option>
                        <option value="3">审核中</option>
                        <option value="4">已驳回</option>
                        <option value="5">已完成</option>
                        <option value="6">已取消</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="demo1">查询</button>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="demo2" id="demo2">导出</button>
            </div>
        </div>
    </form>
</div>
<table class="layui-hide" id="demo" lay-filter="demo"></table>
<script>
    layui.use(['laydate', 'layer', 'table', 'upload', 'element','form'], function(){
        var layer = layui.layer //弹层
                ,table = layui.table //表格
                ,element = layui.element //元素操作
                ,$ =layui.$
                ,form =layui.form
                ,laydate=layui.laydate;

        lay('.test-item').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
            });
        });
        //监听提交
        form.on('submit(demo1)', function(data){
            table.reload('demo',{
                where:data.field
            });
            return false;
        });
        //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,height: 480
            ,url: config.gatewayUri+"/"+config.orderServiceId+'/api/home-recycling-order/admin/getHomeRecyclingOrderList' //数据接口
            ,page: true //开启分页
            ,limit:10
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'orderid', title: '订单编号', width:80, fixed: 'left'}
                ,{field: 'nickName', title: '用户昵称', width: 100}
                ,{field: 'userPhone', title: '用户手机号', width:120}
                ,{field: 'accpoints', title: '支付总积分', width: 90}
                ,{field: 'recyclingCount', title: '回收数量', width:92}
                ,{field: 'recyclersname', title: '回收员', width: 90}
                ,{field: 'bookingtime', title: '预约时间', width: 120}
                ,{field: 'receivetime', title: '下单时间', width: 170,templet:function(d){
                    return layui.util.toDateString((d.receivetime), "yyyy-MM-dd HH:" +
                        "mm:ss")
                }}
                ,{field: 'finishtime', title: '完成时间', width: 170,templet:function(d){
                    return layui.util.toDateString((d.finishtime), "yyyy-MM-dd HH:mm:ss")
                }}
                ,{field: 'orderstatus', title: '订单状态', width: 100,templet:function(d){
                    if(d.orderstatus=='1'){
                        return '预约中';
                    }else if(d.orderstatus=='2'){
                       return '已接单';
                    }else if(d.orderstatus=='3'){
                        return '审核中';
                    }else if(d.orderstatus=='4'){
                        return '已驳回';
                    }else if(d.orderstatus=='5'){
                        return '已完成';
                    }else{
                        return '已取消';
                    }
                }}
                ,{title:'操作',toolbar:"",event:"del",field:"orderstatus",width: 70, align:'center',templet:function(d){
                    if(d.orderstatus=='6') {
                        return '<a class="layui-btn layui-btn-primary layui-btn-xs" id="del" lay-event="del">删除</a>';
                    }else{
                        return '';
                    }
                }}
            ]]
            ,response:{
                statusCode:'200'
            }
            ,parseData:function(res){
                return {
                    "code":res.code,
                    "msg":res.msg,
                    "count":res.data.total,
                    "data":res.data.list
                }
            }
        });
        //监听行工具事件
        table.on('tool(demo)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url: config.gatewayUri+"/"+config.orderServiceId+"/api/home-recycling-order/admin/delHomeRecyclingOrder",
                        data: {"orderid":data.orderid},
                        type: "get",
                        dataType:"json",
                        success: function (data) {
                            obj.del(); //删除对应行（tr）的DOM结构
                            layer.close(index);
                            layer.alert("删除成功!");
                        }
                    });
                });
            }
        });
    });
</script>
</body>
</html>